<template>
  <div id="top">

      <div class="topboxx">
        <!--蓝色矩形-->
        <div class="topbox"></div>  
      </div>

        <div class="text1edit">
            <p>编辑签约信息</p>
        </div>
        <div class="topbox2">
            <div class="p1box">
                <p class="p1">居民信息</p>
            </div>
        </div>

    

    <div class="tabbb1">
            <table height="200px" width="1000px">
                <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">姓名</font></td>
                        <td>
                            <el-input v-model="list.user_name"></el-input>
                        </td>

                        <td ><font style="color: gray;">身份证号</font></td>
                        <td>
                            <el-input v-model="list.user_cardId"></el-input>
                        </td>
                        
                        <td ><font style="color: gray;">性别</font>
                        
                        </td>
                        <td >
                          <!-- <el-input v-model="list.user_sex==1?'男':'女'" ></el-input> -->
                          <el-select v-model="list.user_sex" placeholder="请选择" >
                              <el-option
                                v-for="item in list1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">出生年月</font></td>
                        <td>
                           <el-date-picker type="date"  v-model="list.contract_date" style="width: 100%;"></el-date-picker>
                        </td>
                      
                        <td ><font style="color: gray;">联系电话</font></td>
                        <td>
                          <el-input v-model="list.user_phone"></el-input>
                        </td>
                        <td ><font style="color: gray;">现居住</font></td>
                        <td>
                          <el-input v-model="list.user_area"></el-input>
                        </td> 
                    </tr>
                    <tr align="center">
                      <td colspan="2" width="30px"></td>
                      <td ><font style="color: gray;">居民标签</font></td>
                        <td width="200px">
                           <el-select v-model="list.lable_id" placeholder="请选择" >
                              <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                           
                        </td>
                    </tr>
                    <tr  align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">家庭成员</font></td>
                    </tr>
            </table>
            <div class="table11">
                <div class="img11">
                  <img src="http://localhost:8080/u5911.png" width="90px" height="75px"/>
                </div>
                <div class="aaa11">
                    <table>
                        <tr>
                            <td><b>王琳</b></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;28岁</font></td>
                        </tr>
                        <tr>
                            <td><font style="color: gray;">关系</font></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;夫妻</font></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="table211">
                <div class="img11">
                  <img src="http://localhost:8080/u5911.png" width="90px" height="75px"/>
                </div>
                <div class="aaa21">
                    <table>
                        <tr>
                            <td><b>张一</b></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;40岁</font></td>
                        </tr>
                        <tr>
                            <td><font style="color: gray;">关系</font></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;兄弟</font></td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="jiating">
 &nbsp;<a href="#" class="jiaguanlian">+关联家庭成员</a>
            </div>
    </div>
    <div class="topbox2">
            <div class="p1box11">
                <p class="p1">签约信息</p>
            </div>
        <div class="aaa31">
            <table height="400px" width="1050px">
                <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约编号</font></td>
                        <td><font >{{list.user_id}}</font></td>
      
                        <td ><font style="color: gray;">签约状态</font></td>
                        <td>&nbsp;&nbsp;&nbsp;<font :style={color:stateColora}>
                          {{list.contract_state==1 ?"待审核":(list.contract_state =="2"?"待支付":"已驳回")}}    
                        </font></td>
                        <td ><font style="color: gray;">签约机构</font></td>
                        <td >
                            <el-select v-model="list.sign_organization" placeholder="请选择">
                              <el-option
                                v-for="item in options1"
                                :label="item.label"
                                :key="item.value"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                        </td>

                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约团队</font></td>
                        <td>
                          <el-select v-model="list.teamName" placeholder="请选择">
                             <el-option
                                v-for="item in options2"
                                :key="item.value2"
                                :label="item.label2"
                                :value="item.value2">
                            </el-option>
                         </el-select>
                        </td>

                        <td ><font style="color: gray;">签约医生</font></td>
                        <td>
                          <el-select v-model="list.sign_doctor" placeholder="请选择">
                             <el-option
                                v-for="item in options3"
                                :key="item.value3"
                                :label="item.label3"
                                :value="item.value3">
                            </el-option>
                         </el-select>
                        </td>
 
                        <td ><font style="color: gray;">服务包</font></td>
                        <td >
                          <el-select v-model="list.serveName" placeholder="请选择">
                             <el-option
                                v-for="item in options4"
                                :key="item.value4"
                                :label="item.label4"
                                :value="item.value4">
                            </el-option>
                         </el-select>
                        </td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约类型</font></td>
                        <td><font >首次签约</font></td>

                        <td ><font style="color: gray;">签约周期</font></td>
                        <td>&nbsp;&nbsp;&nbsp;
                          <el-input v-model="list.user_week"></el-input></td>

                        <td ><font style="color: gray;">费用</font></td>
                        <td >&nbsp;&nbsp;<el-input v-model="list.user_price"></el-input></td>
                        
                    </tr>
                    <tr align="center">
                      <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">申请时间</font></td>
                        <td>&nbsp;&nbsp;<font >{{list.contract_date}}</font></td>

                        <td><font style="color: gray;">生效日期</font></td>
                        <td>
                          <el-date-picker type="date"  v-model="list.contract_date"  style="width: 220px;"></el-date-picker>
                        </td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约备注</font></td>
                        <td>
                          <el-input type="textarea" v-model="text1" style="width: 220px;" ></el-input>
                        </td>
                    </tr>
            </table>
      </div>
    </div>
    
    <div class="flowbtn111123">
      <router-link to="/sign01">
        <el-button
            plain
            type="primary"
            @click="baocun">
            保存
        </el-button>
      </router-link>
        <router-link to="/sign01">
         <el-button>返回</el-button>
        </router-link>
    </div>



  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080";
export default {
    data(){
        return{
          text1:'',
          list1: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
      valuesex: "", //性别

     stateColora:"red",


          list:[],
           options: [{
          value: 1,
          label: '慢病护理'
        }, {
          value: 2,
          label: '高血压'
        }, {
          value: 3,
          label: '高血糖'
        }],
        value: '',



        options1: [{
          value: 1,
          label: '罗西社区服务中心'
        }, {
          value: 2,
          label: '天明社区服务中心'
        }, {
          value: 3,
          label: '民进社区服务中心'
        }],
        value1:"",//签约机构



        options2: [{
          value2: 1,
          label2: 'A团队'
        }, {
          value2: 2,
          label2: 'B团队'
        }, {
          value2: 3,
          label2: 'C团队'
        }],
        value2:"",//医生团队



        options3: [{
          value3: 1,
          label3: '医生A'
        }, {
          value3: 2,
          label3: '医生B'
        }, {
          value3: 3,
          label3: '医生C'
        }, {
          value3: 4,
          label3: '医生D'
        }, {
          value3: 5,
          label3: '医生E'
        }, {
          value3: 6,
          label3: '医生F'
        }],
        value3:"",//签约医生



        options4: [{
          value4: 1,
          label4: '基础包￥120'
        }, {
          value4: 2,
          label4: '老人服务包￥280'
        }, {
          value4: 3,
          label4: '儿童服务包￥350'
        }, {
          value4: 4,
          label4: '定制包￥500'
        }],
        value4:"",//服务包
        }
    },
    created () {
        this.selectById();
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
    },
    methods: {
        selectById(){
            axios({
                url: "/sign/getSignById",
                method: "GET",
                params:{
                    id:this.$route.query.id
                }
            }).then((res) => {
                this.list = res.data; //把值传到list里面
                // console.log(this.list);

                if(res.data.contract_state==1){
                    this.stateColora="green"
                }else if(res.data.contract_state==2){
                    this.stateColora="yellow"
                }else if(res.data.contract_state==3){
                    this.stateColora="red"
                }
            });
        },
        baocun(){
            axios({
                url: "/serve/updateServeByid",
                method: "GET",
                params:{
                    edit1list:this.list
                }
            }).then((res) => {
                this.list = res.data; //把值传到list里面
                // console.log(this.list);
                this.$message.success('保存成功')
            });
            
        }
    }
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
}
#top{
    width: 1150px;
    height: 950px;
     background: white;
    margin: 20px auto;
    position: relative;
}
.topbox{
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.topboxx{
    border-width: 0px;
    position: absolute;
    left: 40px;
    top: 42px;
    width: 6px;
    height: 20px;
}
.text1edit{
    position: absolute;
    left: 50px;
    top: 43px;
    font-size: 18px;
}
.topbox2{
    position:absolute;
    top: 80px;
    left: 40px;
}
.p1box{
    margin-top: 40px;
}
.p1box11{
    margin-top: 370px;
    margin-left: 10px;
}
.jiaguanlian{
  color: blue;
}
.jiaguanlian:hover{
  text-decoration:underline;
  color: blue;
}
.tabbb1 {
  position: relative;
  top: 170px;
}
.table11{
    width: 200px;
    height: 80px;
    /* background-color: red; */
    float: left;
    margin-left: 132px;
    margin-top: -20px;
    border-radius: 5px;
    border: 1px solid gainsboro;
}
.table11:hover{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.table211{
    width: 200px;
    height: 80px;
    /* background-color: red; */
    float: left;
    margin-left: 20px;
    margin-top: -20px;
    border-radius: 5px;
    border: 1px solid gainsboro;
}
.table211:hover{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.img11{
    height: 80px;
    width: 100px;
    /* background-color: aqua; */
    border-radius: 5px;
}
.aaa11{
    position: absolute;
    left: 230px;
    top: 200px;
}
.aaa21{
    position: absolute;
    left: 450px;
    top: 200px;
}
.aaa31{
    position: absolute;
    top: 400px;
}
.flowbtn111123{
    position: absolute;
    top: 860px;
    left: 80px;
}
.jiating{
  position: absolute;
  left: 560px;
  top: 210px;
  
}
</style>